<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>guestbook首页</title>
<link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="dist/js/jquery.min.js"></script>
<script src="dist/js/bootstrap.js"></script>
<style>
	@font-face{font-family: ziti;src: url(DFPMo.ttf)}
	li {list-style-type: none;}
	.logo2{font-family: ziti;color:#002F9C;font-size: 38px;}
	.search-border {border-radius: 20px;width: 240px;height: 30px;border: 1px solid #ddd;position: relative;}
	.search {float: left;margin: 3px 80px 0;}
	.search input {width: 170px;border: 0;margin: 4px 10px 0 15px;height: 20px;outline: none;background:#F8F8F8; }
	
	.mykuan{height: 300px;width: 1125px;}
	/*图片欣赏*/
	.picture img {width: 270px;	height: 150px;}
	.imgfloat {width: 270px;height: 150px;float: left;margin: 10px 20px 15px 0;position: relative;overflow: hidden;}
	.title{font-size: 16px;margin-top: 15px;font-family:"华文中宋"}
	.wzxx {	position: absolute;bottom: -25px;left: 0px;background-color: rgba(255, 255, 255, .4);width: 100%;height: 25px;text-align: center;line-height: 25px;transition: 0.5s;color: #FFF;}
	.imgfloat:hover .wzxx {	bottom: 0px;}
	/*摄影教程*/
	.bianxian{width: 1110px; height: 2px;margin: 8px 0;border-bottom: solid 2px #666;}
	.title2{float: left;font-size: 16px;margin-top: 15px;font-family:"华文中宋"}
	.syjc2 li {margin: 15px 10px;width: 346px;float: left;}
	
	.clr:after,.clr:before {content: '';display: block;clear: both;}
	
	.slimg {width: 120px;height: 120px;	display: inline-block;	margin-right: 10px;}
	.slimg img {width: 120px;height: 120px;float: left;}
	.synr {	display: inline-block;	width: 210px;}
	.titlecentent {font-size: 15px;margin-bottom: 10px;}
	.jcnr {text-indent: 28px;color: #777;}
	.tpbl{float: left;margin: 20px 10px 0px 0px;}
	/*热图榜*/
	.rtb2 {text-align: left;float: left;margin-right: 5px;margin-top: 15px;}
	.rtb{margin-top:5px;}
	
	/*底部*/
	.myfooter{background: #081424;color: #FFFFFF;font-family: "黑体";line-height: 30px;padding-left: 150px; }
	
	.mynickname{color:#FFE74C;font-size:16px;}
	.mynickname:hover{color:#FFFEC4;text-decoration: none;}
	.myNumBg{background: url(num.png) no-repeat;background-size:cover;color: #FFF;text-align: center;}
	.myFixed{margin: 80px 0 0 0;}
	
</style>
</head>

<body>
<div class="container">
	<header>
		<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#menu">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="#" class="navbar navbar-brand"><span class="logo2">Picture</span></a>
			</div>
			
			<div class="navbar-collapse collapse" id="menu">
				<ul class="nav navbar-nav">
				
					<li class="active"><a href="index.html">网站首页</a></li>
					<li><a href="#">图片欣赏</a></li>
					<li><a href="#">摄影教程</a></li>
					<li><a href="#">关于我们</a></li>
				</ul>
				
				<form class="navbar-form">
					<div class="search">
      <div class="search-border">
        <form>
          <input type="text" placeholder="搜索"/>
          <span class="glyphicon glyphicon-search"></span>
        
        </form>
       
      </div>
						
    </div>	
</form> 
			</div>
			</div>
		</nav>
		
	</header>
	<main class="row myFixed">
	
	
		<div class="carousel slide myFocus mykuan" data-ride="carousel" id="mycarousel">
      
      <div class="carousel-inner">
        <div class="item active mykuan">
          <img src="img/top1.jpg" width="1200"/>  
         
        </div>
        <div class="item mykuan">
          <img src="img/top2.jpg"  width="1200" />  
          
        </div>
        <div class="item mykuan">
          <img src="img/top3.jpg"   width="1200" />
        
         </div>
      </div>
      <a href="#mycarousel" class="carousel-control left" data-slide="prev">
      </a>
       <a href="#mycarousel" class="carousel-control right" data-slide="next">
      </a>
      
      
    </div>
		<article class="col-lg-10">
			<section class="row">
				
					<article class="col-md-12">
						<div class="title"><span>图片欣赏</span></div>
						<div class="picture">
							<div class="imgfloat"><img src="img/re1.jpg">
         					 <div class="wzxx">夜景</div>
        					</div>
        					<div class="imgfloat"><img src="img/re2.jpg">
         					 <div class="wzxx">黑白</div>
        					</div>
        					<div class="imgfloat"><img src="img/re3.jpg">
         					 <div class="wzxx">水中影</div>
        					</div>
        					<div class="imgfloat"><img src="img/re4.jpg">
         					 <div class="wzxx">星空</div>
        					</div>
        					<div class="imgfloat"><img src="img/re5.jpg">
         					 <div class="wzxx">桥</div>
        					</div>
        					<div class="imgfloat"><img src="img/re6.jpg">
         					 <div class="wzxx">冰锥</div>
        					</div>
        					
						</div>
					</article>
			</section>
		</article>
		<asid class="col-lg-2">
			<div class="panel panel-default rtb">
				<div class="panel-heading">
					<h2 class="panel-title">热图榜</h2>
					
				</div>
				<div class="panel-body">
					<div class="rtb">
						<div class="rtb2"><img src="img/xh1.png" width="20px" height="20px">
						<a href="#">泸沽湖古风</a>
						</div>
					</div>
					<div class="rtb">
						<div class="rtb2"><img src="img/xh2.png" width="20px" height="20px">
						<a href="#">妹系三连</a> 
						</div>
					</div>
					<div class="rtb">
						<div class="rtb2"><img src="img/xh3.png" width="20px" height="20px">
						<a href="#">“网红”猫咪</a> 
						</div>
					</div>
					<div class="rtb">
						<div class="rtb2"><img src="img/xh4.png" width="20px" height="20px">
						<a href="#">阿坝之秋</a> 
						</div>
					</div>
					<div class="rtb">
						<div class="rtb2"><img src="img/xh5.png" width="20px" height="20px">
						<a href="#">特斯拉斯堡</a> 
						</div>
					</div>
					<div class="rtb">
						<div class="rtb2"><img src="img/xh6.png" width="20px" height="20px">
						<a href="#">冬の旅人</a> 
						</div>
					</div>
					<div class="rtb">
						<div class="rtb2"><img src="img/xh7.png" width="20px" height="20px">
						<a href="#">罗马街头</a> 
						</div>
					</div>
					<div class="rtb">
						<div class="rtb2"><img src="img/xh8.png" width="20px" height="20px">
						<a href="#">英国旅拍</a> 
						</div>
					</div>
					<div class="rtb">
						<div class="rtb2"><img src="img/xh9.png" width="20px" height="20px">
						<a href="#">初雪</a> 
						</div>
					</div>
				</div>	
			</div>
		</asid>
		<article class="col-lg-12">
			<section class="row">
				<article class="col-md-12">
						<div class="syjc">
						<div class="title2">摄影教程<div class="bianxian"></div></div>
						<ul class="clr">
							<li class="tpbl">
								<a href="#">
									<div class="slimg"><img src="img/jcsl1.jpg"></div>
									<div class="synr">
										<div class="titlecentent">手机拍人像的8个用光技巧... </div>
										<div class="jcnr">用手机拍摄时，你肯定有过这样的经历：想利用内置闪光灯提亮画面，却拍出了主体过曝而背景死黑一片的照片。尴尬的是...</div>
									</div>
								</a>
							</li>
							<li class="tpbl">
								<a href="#">
									<div class="slimg"><img src="img/jcsl2.jpg"></div>
									<div class="synr">
										<div class="titlecentent">4种简单的线构图，就能让你... </div>
										<div class="jcnr">现如今人手都有一部智能手机，等同于人手一部相机，人人都可以是一个摄影师。然而即使是同一部手机，每个人拍摄出来...</div>
									</div>
								</a>
							</li>
							<li class="tpbl">
								<a href="#">
									<div class="slimg"><img src="img/jcsl3.jpg"></div>
									<div class="synr">
										<div class="titlecentent">初学微距摄影，需要注意... </div>
										<div class="jcnr">拍摄微距可以选择的镜头很多，每家几乎都有专门的微距镜头，甚至你还可以反转标头来拍摄微距，特别是对于初学者而言...</div>
									</div>
								</a>
							</li>
							<li class="tpbl">
								<a href="#">
									<div class="slimg"><img src="img/jcsl4.jpg"></div>
									<div class="synr">
										<div class="titlecentent">正方形构图那么好看，靠的是... </div>
										<div class="jcnr">在很久很久之前啊我经常翻墙去视奸ins大V拍的照片那时真的觉得为什么大家都开始喜欢上拍方形照片了呢而且很神奇的是 ...</div>
									</div>
								</a>
							</li>
							<li class="tpbl">
								<a href="#">
									<div class="slimg"><img src="img/jcsl5.jpg"></div>
									<div class="synr">
										<div class="titlecentent">认识颜色让后期调色变得更简单 </div>
										<div class="jcnr">用手机拍摄时，你肯定有过这样的经历：想利用内置闪光灯提亮画面，却拍出了主体过曝而背景死黑一片的照片。尴尬的是...</div>
									</div>
								</a>
							</li>
							<li class="tpbl">
								<a href="#">
									<div class="slimg"><img src="img/jcsl6.jpg"></div>
									<div class="synr">
										<div class="titlecentent">ISO—曝光的最后一根救命稻草 </div>
										<div class="jcnr">ISO，是每个初学者绕不过的一个概念。我们每按一次快门，光圈、快门速度和ISO都会参与其中，共同作用产生一张照...</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
						
					</article>
			</section>
		</div>
	</main>
	<footer class="bg-info  myfooter" ><img src="img/footerlogo.png" width="80px" height="30px" >一个兴趣使然的图片分享网站</footer>
</div>
</body>
</html>
